<template>
  <div class="chat-iframe-container" :class="{ 'chat-open': isOpen }">
    <div class="chat-toggle" @click="toggleChat">
      <el-icon v-if="!isOpen"><ChatRound /></el-icon>
      <el-icon v-else><Close /></el-icon>
    </div>
    <div class="chat-frame" v-show="isOpen">
        <iframe
    src="http://www.poole507.club/chatbot/6lLbQImcnrZL3s0h"
    style="width: 100%; height: 100%; min-height: 600px"
    frameborder="0"
    allow="microphone">
    </iframe>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ChatRound, Close } from '@element-plus/icons-vue'

const isOpen = ref(false)

const toggleChat = () => {
  isOpen.value = !isOpen.value
}
</script>

<style scoped>
.chat-iframe-container {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
}

.chat-toggle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1C64F2 0%, #3B82F6 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(28, 100, 242, 0.3);
  transition: all 0.3s ease;
  position: fixed;
  right: 20px;
  bottom: 2cm;
}

.chat-toggle:hover {
  transform: scale(1.1);
}

.chat-frame {
  position: fixed;
  right: 20px;
  bottom: 5cm;
  width: 380px;
  height: 700px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  background: white;
  transition: all 0.3s ease;
}

.chat-frame iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* 移动端适配 */
@media screen and (max-width: 480px) {
  .chat-frame {
    width: 100%;
    height: 100%;
    right: 0;
    bottom: 0;
    border-radius: 0;
  }
  
  .chat-toggle {
    right: 15px;
    bottom: 15px;
  }
}
</style> 